<script setup>
import { ref } from 'vue'
import _api from '@/common/api/role'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['edited'])

const isShow = ref(false)
const form = ref({
    id: '',
    name: '',
    age: '',
})

const showDialog = (item) => {
    isShow.value = true
    form.value = Object.assign({}, {
        id: item.id,
        name: item.name,
        age: item.age,
    })
}

const editRole = async () => {
    try {
        await _api.modifyAsyncList(form.value)
        emit('edited', {})
        ElMessage({
            message: '修改成功',
            grouping: true,
            type: 'success',
        })
    } catch (error) {
        console.log(error);
    } finally {
        isShow.value = false
    }
}

defineExpose({
    showDialog
});

</script>

<template>
    <el-dialog v-model="isShow" title="修改角色" width="500">
        <div>
            <el-form :model="form" label-width="80px">
                <el-form-item label="角色名">
                    <el-input v-model="form.name" placeholder="请输入角色名" />
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age" placeholder="请输年龄" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="isShow = false">取消</el-button>
                <el-button type="primary" @click="editRole">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>



<style></style>